import { useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { SideBar, Badge, SearchBar, ErrorBlock } from 'antd-mobile';
import './category.less';
import { useEffect, } from 'react';
import classNames from 'classnames';
// import { CATEGORY_LIST } from '@/utils/constants';
import { connect } from 'dva';

const Category = (props) => {

  const navigate = useNavigate();
  const [activeKey, setActiveKey] = useState(0);
  // console.log(props);
  const { list, dispatch } = props;
  // console.log(list);
  // console.log(list[1].children);

  useEffect(() => {
    dispatch({
      type: 'category/getCategoryListDetail',
    })
  }, [dispatch]);

  const goProList = id => {
    navigate(`/searchlist/goods/list?category_id=${id}`)
  }

  const Detail = ({ activeIndex }) => {
    const detail = list[activeIndex];
    // console.log(detail);
    if (detail.children.length !== 0) {
      return detail.children.map((item, index) => {
        return (
          <div key={item.category_id} className={'cate-goods'} onClick={() => { goProList(item.category_id) }}>
            <img src={require('@/assets/categood.png')} alt="" />
            <p>{item.name}</p>
          </div>
        )
      })
    }
    if (detail.children.length === 0) {
      return (
        <div className='empty'>
          <ErrorBlock status='empty' />
        </div>
      )
    }
  }


  return (
    <>
      <SearchBar placeholder='请输入内容' style={{
        '--border-radius': 0,
      }}
      />

      <div className={'container'}>
        <div className={'side'}>
          <SideBar activeKey={activeKey} onChange={setActiveKey} defaultActiveKey={0}>
            {list.map((item) => (<SideBar.Item key={item.category_id} title={item.name} />))}
          </SideBar>
        </div>
        <div className={'main'}>
          {
            list.map((item, index) => {
              return (
                <div
                  className={classNames('content', parseInt(activeKey) === item.category_id && 'active')}

                >
                  {/* 页面 {item.category_id} */}
                  <Detail activeIndex={index}></Detail>
                </div>
              )
            })
          }
        </div>
      </div >
    </>
  )
}

const mapStateToProps = ({ category }) => {
  return {
    ...category
  }
}
export default connect(mapStateToProps)(Category);